<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="#fff"
      >
        <el-tabs
          v-model="activeName"
        >
          <el-tab-pane
            label="用户管理"
            name="first"
          ><el-button
             type="primary"
             icon="el-icon-search"
             @click="showDialog = true"
           >新增角色</el-button>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
            >
              <el-table-column
                label="序号"
                type="index"
                :index="indexMethod"
                width="180"
              />
              <el-table-column
                prop="name"
                label="角色名称"
                width="180"
              />
              <el-table-column
                prop="description"
                label="描述"
              />
              <el-table-column
                prop="address"
                label="操作"
              >
                <template #default="{ row }">
                  <el-button
                    type="success"
                    size="small"
                    @click="assignPrem(row.id)"
                  >分配权限</el-button>
                  <el-button type="primary" size="small" @click="edit(row.id)">编辑</el-button>
                  <el-button type="danger" size="small" @click="del(row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              :current-page.sync="page"
              :page-sizes="[1, 2, 3, 4,5]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-tab-pane>
          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        </el-tabs>
      </el-card>
      <!-- 新增弹窗 -->
      <el-dialog title="添加角色" :visible="showDialog" @close="closeDialog">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入角色名称" />
          </el-form-item>
          <el-form-item label="角色描述" prop="description">
            <el-input v-model="form.description" placeholder="请输入角色描述" />
          </el-form-item>
        </el-form>

        <template #footer class="aaa">
          <el-button type="primary" @click="btnOk">确认</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </template>
      </el-dialog>
      <!-- 分配权限的弹层 -->
      <el-dialog title="分配权限" :visible="showAssignDialog" @close="closeAssignDialog">
        内容部分
        <el-tree
          ref="tree"
          v-loading="permLoading"
          node-key="id"
          :data="permissionList"
          :props="{label: 'name'}"
          default-expand-all
          show-checkbox
          check-strictly
        />

        <template #footer>
          <el-button @click="closeAssignDialog">取消</el-button>
          <el-button type="primary" @click="btnPermOk">确定</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 1. 引入接口
import { getRoleList, delRole, addRole, getRoleDetail, updateRole, assignPerm } from '@/api/setting'
import { getPermissionList } from '@/api/permission'
import { tranListToTreeData } from '@/utils'
export default {
  data() {
    return {
      activeName: 'first',
      // tableData: [{
      //   date: '2016-05-02',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1518 弄'
      // }, {
      //   date: '2016-05-04',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1517 弄'
      // }, {
      //   date: '2016-05-01',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1519 弄'
      // }, {
      //   date: '2016-05-03',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1516 弄'
      // }],
      tableData: [],
      // 3. 当前页
      page: 1,
      // 4. 每页条数
      pagesize: 3,
      // 5. 总条数
      total: 0,
      // 6. 控制加载转圈
      loading: false,
      // 7. 控制弹窗的
      showDialog: false,
      // 8.弹出框的输入值
      form: {
        name: '',
        description: ''
      },
      // 9.表单校验规则
      rules: {
        name: [{ required: true, message: '角色名不能为空', trigger: ['blur', 'change'] }],
        description: [{ required: true, message: 'mi描述不能为空', trigger: ['blur', 'change'] }]
      },
      //  控制分配权限弹窗的显示/隐藏
      showAssignDialog: false,
      //  用于分配权限的角色id
      roleId: null,
      // 权限列表
      permissionList: [],
      //  控制内部权限加载转圈
      permLoading: false

    }
  },
  created() {
    this.getRoleList()
  },
  methods: {

    // 1. 获取表格数据
    async getRoleList() {
      this.loading = true
      // 1.1 调用接口
      const { total, rows } = await getRoleList(this.page, this.pagesize)
      // 1.2 赋值
      this.total = total
      this.tableData = rows
      this.loading = false
      console.log(this.tableData)
    },
    // 2. 每页显示的条数发生变化会触发
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      //  更新每页显示的条数
      this.pagesize = val
      //  让当前页码到第一页
      this.page = 1
      //  重新拉取数据
      this.getRoleList()
    },
    // 3.当前页发生变化会触发
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      // 更新当前页码
      this.page = val
      // 重新拉取数据
      this.getRoleList()
    },
    // 4.数据排序的修改
    indexMethod(index) {
      // 排序 = index +1 + 当前页面的数据条数 * 当前页面的的页码 -1
      return index + 1 + this.pagesize * (this.page - 1)
    },
    // 5.删除数据
    async del(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row)
        // 首先调用删除数据的接口
        delRole(row.id)
        // 提示删除成功
        this.$message.success('删除角色成功')
        // 做一个判断当删除某一页最后一条数据的时候，页码必须减一，不然会出现空白界面
        if (this.tableData.length === 1 && this.page > 1) {
          this.page--
        }
        // 重新获取页面
        this.getRoleList()
      }).catch(() => {
        // s
        console.log('取消删除')
      })
    },
    // 6.新增角色数据
    btnOk() {
      // 点击确定之前先校验整个表单
      this.$refs.form.validate(async(isok) => {
        // 如果通过校验
        if (isok) {
          if (this.form.id) {
          //  有id是修改编辑操作
          // 调用修改编辑的接口将表单里面的数据写入进去
            await updateRole(this.form)
            // 成功提示
            this.$message.success('编辑成功')
          } else {
          //  无id是添加操作
            // 调用添加角色的接口
            await addRole(this.form)
            // 提示添加成功
            this.$message.success('添加成功')
          }
          // 重置表单数据和校验规则
          this.$refs.form.resetFields()
          // 重置from对象
          this.form = {
            name: '',
            description: ''
          }
          // 关闭弹窗
          this.showDialog = false
          // 更新数据
          this.getRoleList()
        }
      })
    },
    // 点击取消操作
    closeDialog() {
      this.showDialog = false
      this.$refs.form.resetFields()
      this.form = {
        name: '',
        description: ''
      }
    },

    async edit(id) {
      // 1
      console.log(id)
      // 获取用户详情
      const res = await getRoleDetail(id)
      console.log(res)
      // 将form表单的数据重写
      this.form = res
      // 开启弹窗
      this.showDialog = true
    },
    // 点击分配权限按钮
    async assignPrem(id) {
      this.permLoading = true
      this.showAssignDialog = true
      this.roleId = id
      // 获取用户权限名称
      const res = await getPermissionList()
      // 赋值给渲染的数组
      this.permissionList = tranListToTreeData(res, '0')
      //  根据角色的id获取角色所拥有的权限
      const { permIds } = await getRoleDetail(id)
      //  往树组件上设置权限
      this.$refs.tree.setCheckedKeys(permIds)
      this.permLoading = false
    },
    //  关闭分配权限弹窗
    closeAssignDialog() {
      this.showAssignDialog = false
      // 清空树组件上勾选的复选框
      this.$refs.tree.setCheckedKeys([])
      this.permissionList = []
    },
    // 14. 分配权限确定按钮
    async btnPermOk() {
      // 14.1 获取所有的权限数组
      const permIdsArr = this.$refs.tree.getCheckedKeys()
      // console.log(permIdsArr)
      // 14.2 发起请求
      await assignPerm(this.roleId, permIdsArr)
      // 14.3 提示用户
      this.$message.success('更新角色的权限成功')
      // 14.4 关闭弹窗
      this.closeAssignDialog()
    }
  }

}
</script>

<style>
  .el-dialog__footer{
    text-align: center;
  }
</style>
